<template>
  <div class="goods-add">
    <div class="goods-add-content">
    <el-form
      ref="formRef"
      class="goods-add-form"
      label-width="auto"
      :model="formData"
      :rules="rules"
      style="max-width: 600px"
    >
      <el-form-item label="商品名称" label-position="right" prop="goodsName">
        <el-input v-model="formData.goodsName" readonly placeholder="请输入" />
      </el-form-item>
      <el-form-item label="型号" label-position="right" prop="goodsModel">
        <el-input v-model="formData.goodsModel" readonly  placeholder="请输入"/>
      </el-form-item>
      <el-form-item label="能耗级别" label-position="right" prop="goodsLv">
        <el-select v-model="formData.goodsLv" placeholder="请选择" disabled>
            <el-option label="一级能耗" :value="1"></el-option>
            <el-option label="二级能耗" :value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="商品简介" label-position="right" prop="goodsIntro">
        <el-input v-model="formData.goodsIntro" readonly placeholder="请输入" />
      </el-form-item>
      <el-form-item label="商品金额" label-position="right" prop="price">
        <el-input-number v-model="formData.price" :min="0" :max="99999999" placeholder="请输入" readonly>
          <template #suffix>
            <span>RMB</span>
          </template>
        </el-input-number>
      </el-form-item>
      <el-form-item :label="'商品图(' +formData.imgList.length + '/3)'" label-position="right" prop="imgList">
        <ImageUpload
          v-model="formData.imgList"
          :limit="3"
          disabled
          needList
          listType="picture-card"
        >
        </ImageUpload>
      </el-form-item>
      <el-form-item label="参数" label-position="right">
        <div style="margin-bottom: 8px 0;width: 100%;display: flex;justify-content: space-between;">
          <span>产品信息</span>
        </div>
        <el-table :data="formData.attachList1" style="width: 100%">
          <el-table-column prop="prop" label="参数值" width="200">
            <template #default="scope">
              <el-input v-model="scope.row.keyName" readonly />
            </template>
          </el-table-column>
          <el-table-column prop="prop" label="参数名" width="200">
            <template #default="scope">
              <el-input v-model="scope.row.keyValue" readonly />
            </template>
          </el-table-column>
        </el-table>
        <div style="margin-top: 40px;width: 100%;display: flex;justify-content: space-between;">
          <span>综合信息</span>
        </div>
        <el-table :data="formData.attachList2" style="width: 100%">
          <el-table-column prop="prop" label="参数值" width="200">
            <template #default="scope">
              <el-input v-model="scope.row.keyName" readonly />
            </template>
          </el-table-column>
          <el-table-column prop="prop" label="参数名" width="200">
            <template #default="scope">
              <el-input v-model="scope.row.keyValue" readonly />
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
      <el-form-item label="服务" label-position="right" prop="serveIdList">
        <el-checkbox-group v-model="formData.serveIdList">
          <el-checkbox v-for="server in serverList" :key="server.id" :value="server.id" style="margin-bottom: 12px;">
            <el-tag type="primary">{{ server.keyValue }}</el-tag>
            <el-tag type="primary" style="margin-left: 12px;">{{ server.description }}</el-tag>
          </el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item :label="'详情(' +formData.detailList.length + '/10)'" label-position="right" prop="detailList">
        <ImageUpload
          v-model="formData.detailList"
          :limit="10"
          needList
          disabled
          listType="picture-card"
        >
        </ImageUpload>
      </el-form-item>
    </el-form>
  </div>
  </div>
</template>
<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { getDictList } from "@/api/system/dict"
import {  getGoodsInfo } from '@/api/goods'
const { proxy } = getCurrentInstance();

const id = proxy.$route.query.id

const btnLoading = ref(false)
const formRef = ref(null);
let formData = ref({
  goodsName: '',
  goodsModel: '',
  goodsIntro: '',
  price: '',
  imgList: [],
  detailList: [],
  serveIdList: [],
  attachList1: [],
  attachList2: [],
  attachIdList: [],
  goodsLv: ''
})
const serverList = ref([])
getGoodsInfo({ id }).then(res => {
  formData.value = res.data
})
const getData = () => {
  getDictList().then(res => {
    serverList.value = res.data
  })
}
getData()
const rules = reactive({
  goodsName: [
    { required: true, message: '请输入商品名称', trigger: 'blur' },
  ],
  goodsModel: [
    { required: true, message: '请输入商品型号', trigger: 'blur' },
  ],
  goodsIntro: [
    { required: true, message: '请输入商品简介', trigger: 'blur' },
  ],
  price: [
    { required: true, message: '请输入商品金额', trigger: 'blur' },
  ],
  imgList: [
    { required: true, message: '请上传商品图', trigger: 'change' },
  ],
  detailList: [
    { required: true, message: '请上传商品详情图', trigger: 'change' },
  ],
  goodsLv: [
    { required: true, message: '请选择能耗等级', trigger: 'change' },
  ]
})

</script>
<style lang="scss">
.goods-add {
  padding: 8px;
  &-content {
    background: #fff;
    border-radius: 5px;
    padding: 12px;
  }
}
</style>